<style lang="less">
	page{
		background: #f6f6f6;
	}
	.content {
		text-align: center;
	}
	.main-list{
		margin-bottom: 20upx;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.main-list-title{
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
		align-items: center;
		.main-list-title-fl{
			font-size:30upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			line-height:90upx;
		}
		.main-list-title-fr{
			font-size:22upx;
			font-weight:500;
			color:rgba(153,153,153,1);
			line-height:90upx;
		}
		.main-list-title-time{
			font-size:26upx;
			color:rgba(51,51,51,1);
			line-height:29upx;
			.xuanze{
				width: 20upx;
				height: auto;
				margin-left: 10upx;
			}
		}
	}
	.main-list-cen{
		overflow: hidden;
		.main-list-cen-for{
			width: 25%;
			float: left;
			border-top:2upx solid #ededed;
			border-right:2upx solid #ededed;
			box-sizing: border-box;
			color:rgba(51,51,51,1);
			padding: 20upx 0;
			.chakan{
				height: 100rpx;
				line-height: 100upx;
			}
			.num{
				font-size:40upx;
				font-family: 'DINCond';
				font-weight:400;
				line-height:48upx;
			}
			.point{
				line-height:40upx;
				background:rgba(219,194,145,1);
				border-radius:20upx;
				font-size:20upx;
				font-family:'DINCond';
				width: 250upx;
				margin: 0 auto;
				font-weight:400;
				// margin: 15upx 8upx;
				color:rgba(51,51,51,1);
			}
			.progress-pos{
				position: relative;
				progress{
					border-radius: 20upx;
					width: 250upx;
					overflow: hidden;
					margin: 0 auto;
				}
				.progress-meber{
					position: absolute;
					left: 50%;
					margin-left: -115upx;
					top: 0;
					font-size:24upx;
					font-family:'DINCond';
					font-weight:400;
					color:#333333;
					line-height:44upx;
				}
			}
			.zuigao{
				font-size:24upx;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height:48upx
			}
			.num.tes{
				font-weight:bold;
				color:#c4ae84 ;
			}
			.name{
				font-size:24upx;
				font-weight:500;
				line-height:29upx;
				margin-top: 20upx;
			}
			.name.tes{
				font-weight:bold;
				color:#c4ae84 ;
			}
		}
		.main-list-cen-for.jifen{
			width: 50%;
		}
		.main-list-cen-for:nth-child(4){
			border-right:none;
		}
		.main-list-cen-for:nth-child(8){
			border-right:none;
		}
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		margin-top: 20upx;
		width: 750upx;
		height: 540upx;
		background-color: #FFFFFF;
		padding: 20upx 0;
		.qiun-charts-title{
			font-size:30upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			line-height:40upx;
		}
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
<template>
	<view class="content">
		<view class="main-list">
			<view class="main-list-title">
				<view class="main-list-title-fl">直属粉丝新增</view>
				<view class="main-list-title-time" @tap="toggleTab('yearMonth')">
					{{mydate}}
					<image src="/static/img/arrowup_xia@2x.png" class="xuanze" mode="widthFix"></image>
				</view>
			</view>
			<view class="main-list-cen">
				<view class="main-list-cen-for">
					<view class="num">{{bigNum}}</view>
					<view class="name">至尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{middleNum}}</view>
					<view class="name">金尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{smallNum}}</view>
					<view class="name">银尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{generalNum}}</view>
					<view class="name">VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{touristNum}}</view>
					<view class="name">注册会员</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num tes">{{allNum}}</view>
					<view class="name tes">总人数</view>
				</view>
				<view class="main-list-cen-for">
					<view class="chakan"></view>
				</view>
				<view class="main-list-cen-for">
					<view class="chakan"></view>
				</view>
			</view>
			<w-picker
				mode="yearMonth" 
				startYear="2016"
				:current="true"
				@confirm="onConfirm"
				:disabledAfter="true"
				ref="yearMonth" 
				themeColor="#f00"
			></w-picker>
		</view>
		<view class="qiun-charts">
			<view class="qiun-charts-title">{{mydate}} 直属粉丝新增趋势图</view>
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
		</view>
	</view>
</template>
<script>
	import api from '@/common/api';
	import uCharts from '@/components/u-charts/u-charts.js';
	import wPicker from "@/components/w-picker/w-picker.vue";
	var _self;
	var canvaLineA=null;
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				allNum:"",
				bigNum:"",
				middleNum:"",
				smallNum:"",
				generalNum:"",
				touristNum:'',
				//图表
				mydate:'',
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
		},
		onLoad() {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			// 获取当前年月
			var date=new Date;
			 var year=date.getFullYear(); 
			 var month=date.getMonth()+1;
			 month =(month<10 ? "0"+month:month); 
			 this.mydate = (year.toString()+'-'+month.toString());
			this.getFansForMonth()
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.getFansForMonth()
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			async getFansForMonth(){
				const token=uni.getStorageSync('token')
				const [err, res] = await api.getFansForMonth({
					query: {
						date:this.mydate,
						isDirectly:1
					},
					 header:{
						'Content-Type': 'application/json',
						'token': token
					 }
				 });
				 if(res.data.code == 0){
					 this.allNum=res.data.data.allNum
					 this.bigNum=res.data.data.bigNum
					 this.middleNum=res.data.data.middleNum
					 this.smallNum=res.data.data.smallNum
					 this.generalNum=res.data.data.generalNum
					 this.touristNum=res.data.data.touristNum
					 let LineA={categories:[],series:[]};
					 //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					 // LineA.categories=res.data.data.LineA.categories;
					 LineA.categories=res.data.data.dateList;
					 LineA.series=[{
						 name: '-总人数新增-',
						 data:res.data.data.allNumList ,
						 color: '#E93246'
					 },{
						 name: '-至尊VIP新增-',
						 data:res.data.data.bigNumList ,
						 color: '#0099FF'
					 },{
						 name: '-金尊VIP新增-',
						 data:res.data.data.middleNumList ,
						 color: '#039D56'
					 },{
						 name: '-银尊VIP新增-',
						 data:res.data.data.smallNumList ,
						 color: '#FCC133'
					 },{
						 name: '-VIP新增-',
						 data:res.data.data.generalNumList ,
						 color: '#5249CB'
					 },{
						 name: '-注册会员-',
						 data:res.data.data.touristNumList ,
						 color: '#DBC291'
					 }]
					 // _self.textarea = JSON.stringify(res.data.data.LineA);
					 _self.showLineA("canvasLineA",LineA);
				 }
			},
			//选择日期
			toggleTab(str){
				this.$refs[str].show();
			},
			//组件选择返回的参数
			onConfirm(val){
				this.mydate=val.result;
				this.getFansForMonth();
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						position:'top',
						lineHeight:11,
						margin:5,
					},
					dataLabel:true,
					dataPointShape:true,
					dataPointShapeType:'hollow',
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:15,
						scrollShow:true,
						scrollAlign:'left'
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:8,
						min:0,
						max:30,
						format:(val)=>{return val.toFixed(0)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					},
				});
				
			},
			touchLineA(e){
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			//查看详情
			fans(id){
				uni.navigateTo({
				  url: "/pages/myFansDetail/myFansDetail?id="+id
				})
			},
		}
	}
</script>
